<template>
  <div class="p-4">
    <wd-input
      v-model="name"
      size="large"
      :focus="true"
      :focus-when-clear="true"
      clearable
      :cursorSpacing="20"
      :no-border="true"
      placeholder="请输入名称"
      @change="handleChange"
      @confirm="handleConfirm"
    />

    <wd-select-picker
      v-model="key"
      label="优先级"
      :columns="columns"
      custom-value-class="content"
      custom-label-class="content"
      custom-class="content"
      title="请选择优先级"
      :show-confirm="false"
      type="radio"
      @change="handleChange"
    />

    <div class="fixed bottom-0 left-0 right-0 pb-safe px-4">
      <wd-button custom-class="w-full" @click="handleConfirm">保存</wd-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { EditType, Quadrant } from '@/api/record/type';
import { useRecordStore } from '@/store';

const key = ref<Quadrant>('Q3');
const columns = ref([
  {
    value: 'Q1',
    label: '重要紧急'
  },
  {
    value: 'Q2',
    label: '重要不紧急'
  },
  {
    value: 'Q3',
    label: '不重要紧急'
  },
  {
    value: 'Q4',
    label: '不重要不紧急'
  }
]);

onLoad((options) => {
  console.log('打印***options', options);
  uni.setNavigationBarTitle({
    title: options?.type === 'add' ? '新建代办' : '编辑代办'
  });
  if (options?.key) {
    key.value = options.key;
  }
  if (options?.name) {
    name.value = options.name;
  }
});

const name = ref('');

const handleChange = (e: any) => {
  console.log('打印***e', e);
};
const handleConfirm = () => {
  console.log('打印***confirm', confirm);
  const item = {
    name: name.value,
    startTime: '2025-01-07 11:00:00',
    endTime: '2025-01-07 12:00:00',
    isDone: false,
    isRepeat: false
  };
  useRecordStore().setList(key.value, item);
  name.value = '';
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.content {
  color: red !important;

  #radioQ1 {
    color: red;
  }

  #radioQ2 {
    color: orange;
  }

  #radioQ3 {
    color: green;
  }

  #radioQ4 {
    color: gray;
  }
}
</style>
